<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心哦~</title>
    <script src="js/jquery-1.8.2.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="https://cdn.tmooc.cn/tmooc-web/css/iconfont.css"/>
    <link rel="stylesheet" href="https://cdn.tmooc.cn/tmooc-web/css/style.css"/>
    <script src="https://cdn.tmooc.cn/tmooc-web/js/jquery-2.1.1.js"></script>
    <style>
        .layout-body {
            position: absolute;
            top: 70px;
            left: 0;
            right: 0;
            bottom: 0;
        }
        .box-card {
            width: 800px;
            margin: 0 auto;
        }
        body {
            background-color: lavenderblush;
            padding: 0;
        }
        * {
            margin: 0;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header height="60px">
            <div class="md2018033001lty" style="background-color: #6e6e6e">
                <div class="container">
                    <div class="tmooc-logo pull-left" style="margin-top: 25px">
                        <a href="index.html">
                            <img src="./images/logob.png"/>
                        </a>
                    </div>
                    <div>
                        <ul class="slide-nav pull-left clearfix" style="margin-left: 200px">
                            <li><a href="index.html">首页</a></li>
                            <li><a href="">服务</a></li>
                            <li><a href="">团队</a></li>
                            <li><a href="">动态</a></li>
                            <li><a href="">帮助</a></li>
                        </ul>
                    </div>
                </div>

            </div>
        </el-header>
        <el-container class="layout-body">
            <el-aside width="300px" style="background-color: #d2d2d2">
                <br><br><br>
                <div style="text-align: center;top: 50px">
                    <img id="user" :src="user.avatar" height="75px">
                    <br>
                    <span slot="title"style="font-family: 幼圆">qlcail@qq.com</span>
                </div> <br><br><br>
                <el-menu
                        default-active="2"
                        class="el-menu-vertical-demo"
                        @open="handleOpen"
                        @close="handleClose">
                    <el-menu-item index="2">
                        <i class="el-icon-user-solid"></i>
                        <span slot="title">用户信息</span>
                    </el-menu-item>
                    <el-menu-item index="3">
                        <i class="el-icon-document"></i>
                        <span slot="title">导航三</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <i class="el-icon-setting"></i>
                        <span slot="title">导航四</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main>
                <el-card v-if="selectedIndex=='2'" style="font-family: 幼圆"class="box-card">
                    <el-descriptions title="用户信息" column="1" style="font-size: 20px;">
                        <template slot="extra">
                            <el-button type="primary" size="small">修改资料</el-button>
                        </template>
                        <el-descriptions-item label="头像">
                            <img :src="user.avatar" height="75px">
                        </el-descriptions-item>
                        <el-descriptions-item label="昵称">{{user.nickname}}</el-descriptions-item>
                    </el-descriptions>
                </el-card>

                <el-card v-if="selectedIndex=='2'" style="font-family: 幼圆"class="box-card">
                    <el-descriptions column="1" style="font-size: 20px;">
                        <el-descriptions-item label="密码">{{user.password}}</el-descriptions-item>
                        <el-descriptions-item label="邮箱">{{user.email}}</el-descriptions-item>
                        <el-descriptions-item label="电话">{{user.phone}}</el-descriptions-item>
                        <el-descriptions-item label="微信">{{user.wechat}}</el-descriptions-item>
                    </el-descriptions>
                </el-card>

                <el-card v-if="selectedIndex=='2'" style="font-family: 幼圆"class="box-card">
                <el-descriptions column="1" style="font-size: 20px;">
                    <el-descriptions-item label="用户id">{{user.userId}}</el-descriptions-item>
                </el-descriptions>
            </el-card>
            </el-main>
        </el-container>
    </el-container>
</div>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                selectedIndex: "2",
                user: {
                    avatar: "./images/head.jpg",
                    nickname:"qlll",
                    password:"xxxxxxxx",
                    email:"qlcail@qq.com",
                    phone:"1234567890",
                    wechat:"xxx",
                    userId:"001"
                }
            }
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        },
        created: function () {


        }
    })
</script>
>
</body>
<script>
</script>
</html>